<template>
  <div class="header" :style="headerStyle">
    <div id="navbar" class="navbar fix-top" :style="style">
      <div class="container">
        <router-link class="navbar-brand" to="/home">
                    &nbsp;<strong>Rainfer's Blog</strong>&nbsp;
        </router-link>
        <div class="navbar-menu">
          <ul class="navbar-nav">
            <li class="nav-item">
              <router-link class="nav-link waves-effect" to="/home">
                Home
              </router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link waves-effect" to="/archives">
                Archives
              </router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link waves-effect" to="/categories">
                Categories
              </router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link waves-effect" to="/tags">
                Tags
              </router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link waves-effect" to="/about">
                About
              </router-link>
            </li>
            <li id="search-btn" class="nav-item">
              <span class="nav-link waves-effect" @click="searchDialogVisible = true">&nbsp;&nbsp;<i
                class="el-icon-sousuo"
              />&nbsp;&nbsp;</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <el-dialog
      title="搜索"
      :visible.sync="searchDialogVisible"
      width="30%"
    >
      <span>
        <el-input
          v-model="keyword"
          placeholder="请输入内容"
          @keyup.enter.native="search"
        >
          <el-button slot="append" icon="el-icon-sousuo" @click="search" />
        </el-input>
      </span>
    </el-dialog>
    <div class="cover" :style="{backgroundImage:'url(' + coverImg + ')'}">
      <div class="mask">
        <div v-if="maskTitle" class="mask-title">
          <span class="subtitle">{{ subtitle }}</span>
          <span class="typed-cursor"> _</span>
          <div v-if="coverDate" class="date">
            {{ coverDate }}
          </div>
        </div>
      </div>
    </div>
    <el-tooltip class="item" effect="dark" content="快拉我上去" placement="bottom-end">
      <div ref="backTop" class="back-top" style="top: -60rem;" @click="scrollToTop" />
    </el-tooltip>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  name: 'Header',
  props: {
    headerHeight: {
      type: Number,
      default: 100
    },
    subtitle: {
      type: String,
      default: "Rainfer's Blog "
    },
    coverName: {
      type: String,
      default: '/cove/cover1.jpg'
    },
    coverDate: {
      type: String,
      default: ''
    },
    maskTitle: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      headerStyle: { height: `${this.headerHeight}vh` },
      coverImg: require('../assets/images' + this.coverName),
      style: {},
      opacity: 0,
      offsetTop: 0,
      padding: 12,
      searchDialogVisible: false,
      keyword: ''
    }
  },
  mounted() {
    this.offsetTop = document.querySelector('#navbar').offsetTop
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll: _.throttle(function() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.opacity = Math.abs(Math.round(scrollTop)) / 200
      this.padding = 12 - Math.round(7 * scrollTop / 200)
      this.padding = this.padding < 5 ? 5 : this.padding
      this.style = { background: `rgba(47, 65, 84,${this.opacity})`, paddingBottom: `${this.padding}px` }
      if (this.$refs.backTop !== undefined && this.$refs.backTop.style !== undefined) {
        if (scrollTop > 600) {
          this.$refs.backTop.style.top = '-10rem'
        } else {
          this.$refs.backTop.style.top = '-60rem'
        }
      }
    }, 100),
    search() {
      if (this.keyword !== '') {
        this.searchDialogVisible = false
        this.$router.push('/search/' + this.keyword)
      }
    },
    scrollToTop() {
      let timer = 0
      cancelAnimationFrame(timer)
      const startTime = +new Date()
      const b = document.body.scrollTop || document.documentElement.scrollTop
      const d = 500
      const c = b
      timer = requestAnimationFrame(function func() {
        const t = d - Math.max(0, startTime - +new Date() + d)
        document.documentElement.scrollTop = document.body.scrollTop =
                        (t * -c) / d + b
        timer = requestAnimationFrame(func)
        if (t === d) {
          cancelAnimationFrame(timer)
        }
      })
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .header {
        .navbar {
            -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
            -o-transition: background .5s ease-in-out, padding .5s ease-in-out;
            transition: background .5s ease-in-out, padding .5s ease-in-out;
            padding-top: 12px;
            padding-bottom: 12px;
            color: #fff;
            background-color: transparent;
            font-size: .875rem;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
            font-weight: 300;
            display: flex;
            align-items: center;

            .container {
                width: 100%;
                padding-right: 15px;
                padding-left: 15px;
                margin-right: auto;
                margin-left: auto;
                max-width: 1140px;

                .navbar-brand {
                    cursor: pointer;
                    text-decoration: none;
                    display: inline-block;
                    padding-top: .3125rem;
                    padding-bottom: .3125rem;
                    margin-right: 1rem;
                    font-size: 1.25rem;
                    line-height: inherit;
                    white-space: nowrap;
                    color: #fff;
                    float: left;
                }

                .navbar-menu {
                    display: flex;
                    flex-basis: auto;
                    align-items: center;
                    flex-grow: 1;
                    float: right;

                    .navbar-nav {
                        flex-direction: row;
                        text-align: center;
                        display: -ms-flexbox;
                        display: flex;
                        -ms-flex-direction: column;
                        padding-left: 0;
                        list-style: none;
                        line-height: 33px;
                        margin: 0 5px;

                        .nav-item {
                            -webkit-transition-duration: 1s;
                            -o-transition-duration: 1s;
                            transition-duration: 1s;

                            .nav-link {
                                color: #fff;
                                -webkit-transition: .35s;
                                -o-transition: .35s;
                                transition: .35s;
                                display: block;
                                padding-right: .5rem;
                                padding-left: .5rem;
                                font-size: 1rem;

                                &:hover {
                                    background-color: rgba(0, 0, 0, .1);
                                    color: rgba(255, 255, 255, .75);
                                }
                            }

                            .waves-effect {
                                position: relative;
                                cursor: pointer;
                                -webkit-user-select: none;
                                -moz-user-select: none;
                                -ms-user-select: none;
                                user-select: none;
                                -webkit-tap-highlight-color: transparent;
                                overflow: hidden;
                            }
                        }
                    }
                }
            }
        }

        .fix-top {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 1030;
        }

        .cover {
            background-size: cover;
            height: 100%;
            overflow-wrap: break-word;
            position: relative;
            cursor: default;
            overflow: hidden;

            .mask {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background-attachment: fixed;
                overflow: hidden;
                display: flex;
                -webkit-box-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                align-items: center;
                background-color: rgba(0, 0, 0, .3);

                .mask-title {
                    color: #fff;
                    text-align: center;
                    -webkit-animation-name: fadeInUp;
                    animation-name: fadeInUp;
                    font-size: 2rem;

                    .subtitle {
                        margin-bottom: .5rem;
                        font-weight: 500;
                        line-height: 1.2;
                    }

                    @keyframes blink {
                        0% {
                            opacity: 1;
                        }
                        100% {
                            opacity: 0;
                        }
                    }
                    /* 添加兼容性前缀 */
                    @-webkit-keyframes blink {
                        0% {
                            opacity: 1;
                        }
                        100% {
                            opacity: 0;
                        }
                    }

                    .typed-cursor {
                        animation: blink 0.7s infinite;
                        -webkit-animation: blink 0.7s infinite;
                        opacity: 1;
                    }

                    .date {
                        display: block;
                        color: #ffffff;
                        font-size: 1rem;
                        margin-top: .5rem;
                    }
                }
            }
        }

        .back-top {
            background: url() no-repeat 0 0;
            width: 70px;
            height: 900px;
            position: fixed;
            top: -60rem;
            right: 25px;
            transition: 600ms all cubic-bezier(0.25, 0.1, 0.3, 1.5);
            animation: _2XSU8d 2s linear infinite;
            outline: none;
            z-index: 99999;

            &:hover {
                cursor: pointer;
            }

            @keyframes _2XSU8d {
                0% {
                    transform: translateY(0);
                }
                50% {
                    transform: translateY(-6px);
                }
                100% {
                    transform: translateY(0);
                }
            }
        }
    }
</style>
